﻿@{
    Layout = "~/Views/Shared/_FormGray.cshtml";
}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="font-noraml">简单示例</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">显示年月日</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">显示年月日时分秒</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">单框范围选择</label>
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="font-noraml">日期范围选择</label>
                        <div class="input-daterange input-group">
                            <input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd" />
                            <span class="input-group-addon">到</span>
                            <input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        laydate.render({
            elem: '#laydate-demo-1'
        });

        laydate.render({
            elem: '#laydate-demo-2',
            type: 'date'
        });

        laydate.render({
            elem: '#laydate-demo-3',
            type: 'datetime',
            trigger: 'click'
        });

        laydate.render({
            elem: '#laydate-demo-4',
            range: true
        });

        var startDate = laydate.render({
            elem: '#laydate-startTime',
            max: $('#laydate-endTime').val(),
            theme: 'molv',
            trigger: 'click',
            done: function (value, date) {
                // 结束时间大于开始时间
                if (value !== '') {
                    endDate.config.min.year = date.year;
                    endDate.config.min.month = date.month - 1;
                    endDate.config.min.date = date.date;
                } else {
                    endDate.config.min.year = '';
                    endDate.config.min.month = '';
                    endDate.config.min.date = '';
                }
            }
        });

        var endDate = laydate.render({
            elem: '#laydate-endTime',
            min: $('#laydate-startTime').val(),
            theme: 'molv',
            trigger: 'click',
            done: function (value, date) {
                // 开始时间小于结束时间
                if (value !== '') {
                    startDate.config.max.year = date.year;
                    startDate.config.max.month = date.month - 1;
                    startDate.config.max.date = date.date;
                } else {
                    startDate.config.max.year = '';
                    startDate.config.max.month = '';
                    startDate.config.max.date = '';
                }
            }
        });
    });
</script>